@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background rgb(252,252,252)
  overflow-x hidden
  .mine-wrapper
    padding-bottom computedNum(66)
    .head-wrapper
      padding 0 computedNum(20)
      margin-top computedNum(20)
      font-size 0
      .user-avatar-wrapper
        width computedNum(63)
        height computedNum(63)
        margin-right computedNum(15)
        vertical-align top
        img
          width 100%
          border-radius 50%
      .user-info-wrapper
        margin-top computedNum(8)
        .name-and-vip
          width computedNum(256)
          font-size 0
          .user-name
            width computedNum(60)
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            font-family MicrosoftYaHei-Bold
            font-size computedNum(15)
            color #000000
            vertical-align bottom
          .vip-detail
            margin-left computedNum(10)
            font-size computedNum(10)
            color #999999
            .vip-icon
              padding computedNum(4) computedNum(12)
              background url("../img/vip-logo-icon.png") no-repeat center center
              background-size contain
              margin-right computedNum(5)
              position relative
              top computedNum(-5)
        .id-and-sign
          margin-top computedNum(11)
          width computedNum(256)
          .id-num
            font-size computedNum(14)
            color #999999
          .sing-btn
            width computedNum(72)
            height computedNum(24)
            line-height computedNum(24)
            font-size computedNum(14)
            color #fa4747
            border-1px-all(#fa4747)
            &:after
              border-radius computedNum(24)
    .asset-wrapper
      width computedNum(290)
      height computedNum(76)
      background #ffffff
      padding-top computedNum(14)
      margin computedNum(25) computedNum(42.5) computedNum(35) computedNum(42.5)
      font-size computedNum(27)
      .asset-name
        color #999999
        font-size computedNum(11)
        margin-top computedNum(8)
      .coin-wrapper
        width 50%
      .gift-wrapper
        width 50%
    .content-wrapper
      .function
        width computedNum(335)
        height computedNum(57)
        margin-left computedNum(20)
        font-size 0
        border-1px-bottom(rgb(238,238,238))
        &.vip
          &:after
            border none
          .left-wrapper
            background url("../img/mine-vip-icon.png") no-repeat left center
            background-size computedNum(22) computedNum(21)
        &.sign
          .left-wrapper
            background url("../img/mine-sign-icon.png") no-repeat left center
            background-size computedNum(17) computedNum(25)
        &.income
          .left-wrapper
            background url("../img/mine-income-icon.png") no-repeat left center
            background-size computedNum(24) computedNum(23)
        &.pay
          .left-wrapper
            background url("../img/mine-pay-icon.png") no-repeat left center
            background-size computedNum(19) computedNum(23)
        &.exchange
          &:after
            border none
          .left-wrapper
            background url("../img/mine-exchange-icon.png") no-repeat left center
            background-size computedNum(22.5) computedNum(17)
        &.bind-phone
          .left-wrapper
            background url("../img/bind-phone.png") no-repeat left center
            background-size computedNum(18) auto
        &.feedback
          &:after
            border none
          .left-wrapper
            background url("../img/mine-feedback-icon.png") no-repeat left center
            background-size computedNum(21.5) computedNum(20.5)
        .left-wrapper 
          vertical-align top
          width computedNum(38)
          height computedNum(57)
          background url("../img/mine-recharge-icon.png") no-repeat left center
          background-size computedNum(22) computedNum(23)
        .center-wrapper
          font-family SimHei
          font-size computedNum(17)
          width computedNum(140)
          height computedNum(57)
          line-height computedNum(57)
          color #000000
        .right-wrapper
          text-align right
          vertical-align top
          font-size computedNum(13)
          width computedNum(140)
          height computedNum(57)
          line-height computedNum(57)
          color #fa4848
          padding-right computedNum(16)
          background url("../img/forward-icon.png") no-repeat right center
          background-size computedNum(7) computedNum(12)
          span
            color #acacac
    .big-split-line
      width 100%
      height computedNum(21)
      background rgb(245,245,245)
    .bottom-nav-wrapper
      border-1px-top(rgb(226,226,226))
      position fixed
      bottom 0
      left 0
      width 100%
      padding computedNum(6) computedNum(35)
      font-size 0
      background #ffffff
      z-index 9
      li
        width computedNum(50)
        font-size computedNum(11)
        color #666666
        margin-right computedNum(35)
        text-align center
        &:last-child
          margin-right 0
        &.mine-li
          color #fa4747
        div
          width computedNum(50)
          height computedNum(38)
        .shelf-icon-wrapper
          background url("../img/shelf-icon.png") no-repeat center center
          background-size computedNum(19.5) computedNum(22.5)
        .index-icon-wrapper
          background url("../img/index-icon.png") no-repeat center center
          background-size computedNum(23) computedNum(22)
        .rank-icon-wrapper
          background url("../img/cat-icon.png") no-repeat center center
          background-size computedNum(23) computedNum(23)
        .mine-icon-wrapper
          background url("../img/mine-icon-active.png") no-repeat center center
          background-size computedNum(22) computedNum(22)